<template>
    <div class="all">
      <!-- <div class="button">
          <el-button @click="addBtn($event)">添加</el-button>
          <el-button @click="putBtn($event)">修改</el-button>
          <el-button @click="delBtn($event)">删除</el-button>
        </div> -->
        <el-table
          
          :data="tableData"
          :row-style="{height: '60px'}"
          stripe
          style="width: 100%"
          
        >

         

          <el-table-column
            label="序号"
            type="index"
          >
            <template scope="scope">
              <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column
            v-for="(item,index) in title"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            show-overflow-tooltip
          >

          </el-table-column>

          <el-table-column
            label="操作"
            type="put"
            
          >
            <template scope="scope">
              <span><el-button :disabled="scope.row.recovertime?true:false"  size='mini' @click="recoveBtn(scope.row.id                    )">手动恢复</el-button></span>
            </template>
          </el-table-column>

        </el-table>
        <div class="page"> 
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[pageSize, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
          </el-pagination>
      </div>



    </div>
  </template>
  
  <script>
  import {getAlarm} from "@/api/dataReq"
  import { req } from '@/api/basicReq'
  export default {
    name: 'RoomFloor',
    props: {
    
    },
    data(){
        return{
            title:[
            { prop: 'createtime', label: '告警时间' },
            { prop: 'room_name', label: '房间' },
            { prop: 'device_name', label: '设备' },
            { prop: 'reason', label: '告警原因' },
            { prop: 'recovertime', label: '恢复时间' },
            
            ],
            tableData: [],
            
            currentPage: 1, 
            pageSize: 10, 
            total: 100, 

        }
    },
    created(){
      this.getData()
      
    },

    methods:{
      getData(){
        var reqData  ={
          page_size: this.pageSize,
          page_num: this.currentPage,
        }
        getAlarm(reqData).then(response => {
          if (response.code == '1') {
            // console.log(response)
           this.tableData = response.data
           this.total = response.total

          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
      },
     

    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getData()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val
        this.getData()
      },
      recoveBtn(alarm_id){
        // console.log(alarm_id)
        var data = {
        url: 'device/Alarm',
        method: 'put',
        data: { id: alarm_id }
      }
      req(data).then((res) => {
        if (res.code == 1) {
          this.$message.success('手动恢复成功')
          
          this.getData()
        }
      })
      }


    }
    
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
  @import '~@/style/minxin.scss';
   $allbackcolor: rgba(11,44,108,1);
  $selectcolor: rgba(1,18,67, 1);


  .all{
    height: 80vh;
  }
.button {
        display: flex;
        justify-content: end;
        margin-bottom: 10px;
        .el-button{
  color: #fff;
  background-color: $selectcolor;
  border: 1px solid gray;
}
      }

.page{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  /deep/ .el-input__inner {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}





/deep/ .number {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .active {
    color: rgb(50, 111, 234);
}
/deep/ .el-pagination .btn-prev {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination .btn-next {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination__total {
   
    color: white;
}
/deep/ .el-pagination__jump {
    
    color: white;
}
}

.imgBtn {
    // width: 100%;
    position: relative;
    .img_btn {
      @include flex-center;
      border: 1px solid #dcdfe6;
      border-radius: 5px;
      color: #dcdfe6;
      font-size: 30px;
      width: 80px;
      height: 80px;
      overflow: hidden;
    }

    .img_btn > input {
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      height: 80px;
      z-index: 1000;
      opacity: 0;
      cursor: pointer;
    }

    .img_btn > img {
      width: 75px;
      height: 75px;
      object-fit: scale-down;
      position: absolute;
      top: center;
      left: center;
    }
  }
::v-deep {
  .tableTooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 弹窗
  .el-dialog {
    min-width: 400px;
  }

  .el-form-item__label {
    text-align: center;
  }

  .el-input__inner {
    height: 30px;
  }
  // 下拉框
  .el-select {
    width: 100%;
  }

  .el-dialog--center .el-dialog__body {
    padding: 0 25px;
  }

  .hide .el-upload--picture-card {
    display: none;
  }

  .showImg {
    .el-dialog {
      height: 500px;
      @include flex-column;
      justify-content: center;
      .content {
        flex: 1;
        @include flex-center;
        img {
          width: 100%;
          height: 100%;
          object-fit: scale-down;
        }
      }
    }
  }

  .el-table__header .el-table-column--selection .cell .el-checkbox:after {
    color: #909399;
    content: '全选';
    font-size: 14px;
    margin-left: 2px;
    font-weight: bold;
  }
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
  color: #fff;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  color: #fff;
}
  </style>
  